<template>
  <div>
    <div class="main">
      <!-- 头部登录部分 开始 -->
      <div class="My_title__39w3V">
        <img class="My_bg__2j-VX" src="@/views/Profile/df5fe4d0de8bb40c54252895cb3d107.png" alt="">
        <!-- 登录大框 -->
      <div class="My_info__eOYeg">
        <!-- 头像圆圈 -->
        <div class="My_myIcon__3cKIV">
          <!-- 头像图片 -->
          <img class="My_avatar__2Fbh7" src="@/views/Profile/cea506e7ac5b626c3095831ef605276.png" alt="">
        </div>
        <div class="My_name__3U2NB">游客</div>
        <div class="My_edit__3wqlv">
          <a  href="#">
             <van-button type="primary" size="small" @click="toLogin">去登录</van-button>
            <!-- <button class="btnn">去登录</button> -->
          </a>
        </div>
        <!-- 登录大框 end -->

      </div>
      </div>
      <!-- 头部登录部分 结束 -->
    </div>
   <van-grid :column-num="3">
  <van-grid-item icon="coupon-o" text="我的收藏" />
  <van-grid-item icon="photo-o" text="我的出租" />
  <van-grid-item icon="clock-o" text="看房记录" />
  <van-grid-item icon="photo-o" text="成为房主" />
  <van-grid-item icon="manager-o" text="个人资料" />
  <van-grid-item icon="service-o" text="联系我们" />
</van-grid>
<div class="up">
  <img  src="@/views/Profile/70b9ac70930d19888672b2c1e4f2222.png" alt="">
</div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    toLogin () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.up{
text-align: center;
  width: 100%;
}
img{
  width: 90%;
  align-content: center;
}
.My_title__39w3V{
  min-height: 300px;
}
.My_bg__2j-VX{
  width: 100%;
}
 .My_info__eOYeg{
    // float: left;
    position: absolute;
    background: #fff;
    width: 75%;
    height: 25%;
    // bottom: 0;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
}
.My_myIcon__3cKIV{
      position: relative;
      transform: translateY(-50%);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      border: 5px solid #f5f5f5;
      display: inline-block;
      box-shadow: 0 2px 2px #bdbdbd;
}
.My_avatar__2Fbh7{
    width: 100%;
    border-radius: 50%;
}
.My_name__3U2NB{
      margin-top: -30px;
    margin-bottom: 10px;
}
.btnn{
  color: #fff;
    font-size: 12px;
    margin-top: 17px;
    background-color: #21b97a;
    border: 1px solid #21b97a;
    border-radius: 15%;
}
.My_edit__3wqlv{
    // font-size: 9px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
}
</style>
